import Taro, { Component } from '@tarojs/taro'
import { View, Text, Input, Image, Button } from '@tarojs/components'
import './index.css'

export default class Index extends Component {


  constructor() {

    super()
    this.setState({

      title: '首页',
      list: []
    })
  }

  componentWillMount() { 

    this.requestData();
  }

  handleChane(e){

    this.setState({
			userName: e.target.value
		})
    this.requestData(e.target.value)
  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  requestData(title) {

    let that = this

    Taro.request({
      url: '/api/questions', //仅为示例，并非真实的接口地址
      data: {
        title__icontains: title
        
      },
      header: {

        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        // console.log(res.data)

        that.setState({

          list: res.data.data.results
        })

        console.log('list :' + res.data.data.results)
      }
    })

  }

  config = {
    navigationBarTitleText: '首页'
  }

  render() {
    return (
      <View className='parent'>


        <View className='nav'>

          <View className='nav-search' >

            <Input className='input-search' placeholder='请输入题目' onChange={this.handleChane.bind(this)}   focus>
            </Input>

            {/* <Image  style = 'width : 40px;height:40px' src = '../../images/delete.png'></Image>
     */}
          </View>
  
        </View>


        <View className='list-exam'>

          {this.state.list.map((item,index) => {

            return (<View>


              <View className='txt-title'> {index + 1} {item.title} </View>


              <View className='txt-answer'> 正确答案：{item.answers}</View>


              <View className='txt-t1'> 1.{item.choices['1']} </View>
              <View className='txt-t1'> 2.{item.choices['2']} </View>
              <View className='txt-t1'> 3.{item.choices['3']} </View>
              <View className='txt-t1'> 4.{item.choices['4']} </View>

              <View className='line'> </View>
            </View>)
          })}

        </View>
      </View>
    )
  }
}
